<template>
  <div>
    <p>绑定class和style</p>
    <!-- 动态绑定class -->
    <div :class="classA">绑定class</div>
    <!-- 动态绑定多个class -->
    <div :class="[classA, classB]">绑定多个class</div>
    <!-- 通过对象方式绑定class -->
    <div :class="{ current: true, focus: false }">通过对象方式绑定class</div>
    <div :class="{ current: isCurrent, focus: isFocus }">
      通过对象方式绑定class
    </div>

    <!-- 绑定style，style是一个对象,fontSize作为key要以驼峰写法,原font-size -->
    <div :style="{ color: 'red', fontSize: '16px' }">绑定style</div>
    <div :style="{ color: color, fontSize: ft }">绑定style2</div>
    <div :style="styleObject">绑定style3</div>
  </div>
</template>

<script>
export default {
  name: "demon2",
  data() {
    return {
      classA: "current",
      classB: "focus",
      isCurrent: true,
      isFocus: false,
      color: "blue",
      ft: "40px",
      styleObject: {
        color: "gray",
        fontSize: "30px"
      }
    };
  }
};
</script>
<style lang="stylus" scoped></style>
